import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import {argTypesView} from './helpers/helpers';

export const buttonDocs= [
  { source: { code: `
        component.NewButton("button",
              action.CreatePayload(octant.ActionDeleteObject, key.ToActionPayload()),
              component.WithButtonConfirmation(
                "Delete Pod",
                "Are you sure you want to delete *Pod* **pod**?",
              ))`
  }}
]

export const buttonStyleDocs= [
  { source: { code: `
      component.NewButton("Button Style Outline",
        action.Payload{},
        component.WithButtonStyle(component.ButtonStyleOutline))`
  }},
  { source: { code: `
      component.NewButton("Button Style Solid",
        action.Payload{},
        component.WithButtonStyle(component.ButtonStyleSolid))`
  }},
  { source: { code: `
      component.NewButton("Button Style Flat",
        action.Payload{},
        component.WithButtonStyle(component.ButtonStyleFlat))`
  }}
]

export const buttonStatusDocs= [
  { source: { code: `
      component.NewButton("Button Status Success",
        action.Payload{},
        component.WithButtonStatus(component.ButtonStatusSuccess))`
  }},
  { source: { code: `
      component.NewButton("Button Status Info",
        action.Payload{},
        component.WithButtonStatus(component.ButtonStatusInfo))`
  }},
  { source: { code: `
      component.NewButton("Button Status Danger",
        action.Payload{},
        component.WithButtonStatus(component.ButtonStatusDanger))`
  }},
  { source: { code: `
      component.NewButton("Button Status Disabled",
        action.Payload{},
        component.WithButtonStatus(component.ButtonStatusDisabled))`
  }}
]

export const buttonSizeDocs= [
  { source: { code: `
      component.NewButton("Button Size Block",
        action.Payload{},
        component.WithButtonStatus(component.ButtonSizeBlock))`
  }},
  { source: { code: `
      component.NewButton("Button Size Large",
        action.Payload{},
        component.WithButtonStatus(component.ButtonSizeLarge))`
  }},
]

export const buttonView= {
  config: {
    name: 'Delete',
    payload: {},
    confirmation: {
      title: 'Delete Pod',
      body: 'Are you sure you want to delete *Pod* **pod**?',
    },
  },
  metadata: {
    type: 'button',
  }
};

export const buttonViewSize= {
  config: {
    name: 'Button Size Block',
    payload: {},
    size: 'block'
  },
  metadata: {
    type: 'button',
  },
};

export const buttonLarge =  {
  config: {
    name: 'Button Size Large',
    payload: {},
    size: 'lg'
  },
  metadata: {
    type: 'button',
  },
};

export const buttonSuccess = {
  config: {
    name: 'Button Status Success',
    payload: {},
    status: 'success'
  },
  metadata: {
    type: 'button',
  },
};

export const buttonInfo = {
  config: {
    name: 'Button Status Info',
    payload: {},
    status: 'info'
  },
  metadata: {
    type: 'button',
  },
};

export const buttonDanger= {
  config: {
    name: 'Button Status Danger',
    payload: {},
    status: 'danger'
  },
  metadata: {
    type: 'button',
  },
};

export const buttonDisabled = {
  config: {
    name: 'Button Status Disabled',
    payload: {},
    status: 'disabled'
  },
  metadata: {
    type: 'button',
  },
};

export const buttonOutline = {
  config: {
    name: 'Button Style Outline',
    payload: {},
    style: 'outline'
  },
  metadata: {
    type: 'button',
  },
};

export const buttonSolid = {
  config: {
    name: 'Button Style Solid',
    payload: {},
    style: 'primary'
  },
  metadata: {
    type: 'button',
  },
};

export const buttonFlat = {
  config: {
    name: 'Button Style Flat',
    payload: {},
    style: 'link'
  },
  metadata: {
    type: 'button',
  },
};

export const ButtonStoryTemplate = args => ({
  template: `<app-button [view]= "view"></app-button>`,
  argTypes: argTypesView,
  props: { view: args.view },
});

<h1>Button component</h1>
<h2>Description</h2>

<p>A Button component is a Button that can exists without a Button Group component.</p>
<p>The Button component supports a confirmation method with a Markdown compatible message that appears in a modal.</p>

<h2>Example</h2>

<Meta title="Components/Button" argTypes = { argTypesView } />

<Canvas withToolbar>
  <Story name="Button component"
         parameters={{ docs: buttonDocs[0] }}
         args= {{ view: buttonView }}>
    { ButtonStoryTemplate.bind({}) }
  </Story>
</Canvas>

<h2>Buttons with size</h2>
<p>Current available sizes are: <strong>ButtonSizeBlock</strong> and <strong>ButtonSizeLarge</strong>.</p>
<h2>Example</h2>

<Canvas withToolbar>
  <Story name="Button size block"
         parameters={{ docs: buttonSizeDocs[0] }}
         args= {{ view: buttonViewSize }}>
    { ButtonStoryTemplate.bind({}) }
  </Story>
  <Story name="Button size large"
         parameters={{ docs: buttonSizeDocs[1] }}
         args= {{ view: buttonLarge }}>
    { ButtonStoryTemplate.bind({}) }
  </Story>
</Canvas>


<h2>Buttons with status</h2>
<p>Current available status are: <strong>ButtonStatusSuccess</strong>, <strong>ButtonStatusInfo</strong>, <strong>ButtonStatusDanger</strong> and <strong>ButtonStatusDisabled</strong>.</p>
<h2>Example</h2>

<Canvas withToolbar>
  <Story name="Button status success"
         parameters={{ docs: buttonStatusDocs[0] }}
         args= {{ view: buttonSuccess }}>
    { ButtonStoryTemplate.bind({}) }
  </Story>
  <Story name="Button status info"
         parameters={{ docs: buttonStatusDocs[1] }}
         args= {{ view: buttonInfo }}>
    { ButtonStoryTemplate.bind({}) }
  </Story>
  <Story name="Button status danger"
         parameters={{ docs: buttonStatusDocs[2] }}
         args= {{ view: buttonDanger }}>
    { ButtonStoryTemplate.bind({}) }
  </Story>
  <Story name="Button status disabled"
         parameters={{ docs: buttonStatusDocs[3] }}
         args= {{ view: buttonDisabled }}>
    { ButtonStoryTemplate.bind({}) }
  </Story>
</Canvas>

<h2>Buttons with style</h2>
<p>Current available styles are: <strong>ButtonStyleOutline</strong>, <strong>ButtonStyleSolid</strong> and <strong>ButtonStyleFlat</strong>.</p>
<h2>Example</h2>

<Canvas withToolbar>
  <Story name="Button style outline"
         parameters={{ docs: buttonStyleDocs[0] }}
         args= {{ view: buttonOutline }}>
    { ButtonStoryTemplate.bind({}) }
  </Story>
  <Story name="Button style solid"
         parameters={{ docs: buttonStyleDocs[1] }}
         args= {{ view: buttonSolid }}>
    { ButtonStoryTemplate.bind({}) }
  </Story>
  <Story name="Button style flat"
         parameters={{ docs: buttonStyleDocs[2] }}
         args= {{ view: buttonFlat }}>
    { ButtonStoryTemplate.bind({}) }
  </Story>
</Canvas>

<h2>Props</h2>
<ArgsTable story = "Button component" />
